<template>
  <div ref="fullkeyboardDom" class="fullkeyboard" tabindex="1" @keydown="handleKeyDown">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import mittBus from '@/utils/mittBus';
defineOptions({ name: 'Fullkeyboard' });
import {ref} from 'vue'
const fullkeyboardDom = ref(null)
const handleKeyDown = (e) => {
  if (e.keyCode == '13') {
    let ele = e.target
    let focusindex = ele.getAttribute('focusindex')
    let [formId,formItemName] = focusindex.split('#')
    let formDom = document.querySelector(`#${formId}`)
    if (formItemName == 'noValid') {
      focusNextElement(ele)
      return
    }
    formDom.__vueParentComponent.exposed.validateField(formItemName,(flag)=>{
      console.log(flag)
      if (flag) {
        focusNextElement(ele)
      }
    })  
  }
}
mittBus.on('validated', (e) => {

});
function focusNextElement (ele) {
  let activeElement = ele
  let allEle = [...fullkeyboardDom.value.querySelectorAll('[focusIndex]')]
  let index = allEle.indexOf(activeElement)
  for (let i = index + 1; i < allEle.length; i++) {
    let nextElement = allEle[i];
    if (nextElement.offsetWidth > 0 && nextElement.offsetHeight > 0 && !nextElement.disabled) {
      nextElement.focus()
      break;
    }
  }
}
</script>

<style  lang="scss">
// @import './index.scss';
// *:focus {
//   border: 2px solid;
// }
</style>
<style scoped lang="scss">
// @import './index.scss';
.fullkeyboard {
  // border: 1px solid red;
}
</style>
